<!-- <template>
    <div class="blood-pressure-container">
        <div class="header">
            <u--text bold color="#4B4866" size="36" text="2023-06-28  15:58:15"></u--text>
            <u--text color="rgba(75,72,102,0.36)" size="36" text="历史记录" @click="show = true"></u--text>
        </div>

        <div class="pressure-readings">
            <div class="reading-item">
                <u--text bold color="#4B4866" size="50" text="98"></u--text>
                <u--text bold color="rgba(60,60,60,0.59)" size="32" text="收缩压（mmHg）"></u--text>
            </div>
            <div class="reading-item">
                <u--text bold color="#4B4866" size="50" text="98"></u--text>
                <u--text bold color="rgba(60,60,60,0.59)" size="32" text="舒张压（mmHg）"></u--text>
            </div>
        </div>

        <div class="pressure-levels">
            <div class="level-item">
                <div class="level-indicator low"></div>
                <u--text bold color="rgba(60,60,60,0.59)" size="32" text="偏低"></u--text>
            </div>
            <div class="level-item">
                <div class="level-indicator normal"></div>
                <u--text bold color="rgba(60,60,60,0.59)" size="32" text="正常"></u--text>
            </div>
            <div class="level-item">
                <div class="level-indicator mild"></div>
                <u--text bold color="rgba(60,60,60,0.59)" size="32" text="轻度"></u--text>
            </div>
            <div class="level-item">
                <div class="level-indicator moderate"></div>
                <u--text bold color="rgba(60,60,60,0.59)" size="32" text="中度"></u--text>
            </div>
            <div class="level-item">
                <div class="level-indicator severe"></div>
                <u--text bold color="rgba(60,60,60,0.59)" size="32" text="重度"></u--text>
            </div>
        </div>

        <div class="ai-assessment">
            <u--text bold color="rgba(0,0,0,1)" size="32" text="Ai评估建议"></u--text>
        </div>

        <div class="assessment-content">
            您本次心率正常
        </div>

        <div class="chart-section">
            <div class="chart-header">
                <u--text bold color="#4B4866" size="32" text="趋势图"></u--text>
                <u--text bold color="rgba(75,72,102,0.36)" size="32" text="历史记录" @click="show = true"></u--text>
            </div>
            <div class="chart-container">
                <view class="charts-box" v-show="!show">
                    <qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
                </view>
            </div>
        </div>

        <u-popup :show="show" mode="bottom" round="32rpx" @close="handleClose">
            <div class="history-popup">
                <div class="popup-header">
                    <u--text bold color="#4B4866" size="32" text="历史记录"></u--text>
                </div>
                <u-table :striped="false" :data="dataList" :showHeader="false" height="800">
                    <u-table-column prop="name" label=" " width="270"></u-table-column>
                    <u-table-column prop="school" label=" " width="200"></u-table-column>
                    <u-table-column prop="major" label=" " width="220"></u-table-column>
                </u-table>
            </div>
        </u-popup>
    </div>
</template>

<script>
export default {
    data() {
        return {
            show: false,
            opts: {
                color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
                padding: [15, 10, 0, 15],
                enableScroll: false,
                legend: {},
                xAxis: {
                    disableGrid: true
                },
                yAxis: {
                    gridType: "dash",
                    dashLength: 2
                },
                extra: {
                    line: {
                        type: "curve",
                        width: 2,
                        activeType: "hollow"
                    }
                }
            },
            chartData: [],
            dataList: [
                {
                    name: '2023-01-02',
                    school: '18:00',
                    major: '29.00mmHg'
                },
                {
                    name: '2023-01-02',
                    school: '18:00',
                    major: '29.00mmHg'
                },
                {
                    name: '2023-01-02',
                    school: '18:00',
                    major: '29.00mmHg'
                },
                {
                    name: '2023-01-02',
                    school: '18:00',
                    major: '29.00mmHg'
                },
                {
                    name: '2023-01-02',
                    school: '18:00',
                    major: '29.00mmHg'
                },
                {
                    name: '2023-01-02',
                    school: '18:00',
                    major: '29.00mmHg'
                },
                {
                    name: '2023-01-02',
                    school: '18:00',
                    major: '29.00mmHg'
                },
            ]
        }
    },
    mounted() {
        this.getServerData();
    },
    methods: {
        getServerData() {
            // 模拟从服务器获取数据时的延时
            setTimeout(() => {
                // 模拟服务器返回数据
                let res = {
                    categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
                    series: [
                        {
                            name: "目标值",
                            data: [35, 36, 31, 33, 13, 34]
                        },
                    ]
                };
                this.chartData = JSON.parse(JSON.stringify(res));
            }, 500);
        },
        handleClose() {
            this.show = false;
        }
    }
}
</script>

<style scoped>
.blood-pressure-container {
    background-color: #FCFDFF;
    min-height: 100vh;
    padding: 30rpx 48rpx;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pressure-readings {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60rpx;
}

.reading-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.reading-item:not(:first-child) {
    margin-left: 40rpx;
}

.reading-item u--text:last-child {
    margin-top: 18rpx;
}

.pressure-levels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 80rpx;
}

.level-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.level-indicator {
    width: 110rpx;
    height: 10rpx;
}

.level-item u--text {
    margin-top: 22rpx;
}

.low {
    background-color: #1178F2;
}

.normal {
    background-color: #24C789;
}

.mild {
    background-color: #FFC82C;
}

.moderate {
    background-color: rgba(250, 116, 107, 0.86);
}

.severe {
    background-color: #E43A3A;
}

.ai-assessment {
    margin-top: 60rpx;
}

.assessment-content {
    margin-top: 20rpx;
}

.chart-section {
    margin-top: 40rpx;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chart-container {
    margin-top: 30rpx;
}

.charts-box {
    width: 100%;
    height: 300px;
}

.history-popup {
    padding: 40rpx;
}

.popup-header {
    margin-bottom: 12rpx;
}
</style> -->